<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>首页</title>
    <link rel="stylesheet" href="../../libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../style/wap/index.css">
    <link rel="stylesheet" href="../../style/wap/ask.css">

	<script src="../../libs/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="../../libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../libs/layer-v3.1.1/layer/layer.js"></script>
	<script src="../../libs/vue.js"></script>
	<script src="../../jsc/axios.min.js"></script>
	<script src="../../jsc/common.js"></script>
	<script src="../../jsc/component_wap.js"></script>

	<!--<script src="js/system.js"></script>-->
</head>
<body>
<div id="app" v-cloak>
	<header-component></header-component>
	<main>
		<div class="content">
			<div class="ask-search">
				<div class="ask-search-input">
					<img src="../../static/icon-wap/搜索d.png" alt="">
					<input type="text" v-model="keyword" @keyup.enter="search">
				</div>
				<div class="ask-search-btn" @click="search">搜索</div>
			</div>

			<div class="problem-search-item" v-for="item in list" v-cloak>
				<div class="problem-search-item-title">{{ item.title }}</div>
				<div class="problem-search-item-prop">
					<span>{{ item.user.nickname }}</span>
					<span>发布于：{{ item.createtime_text }}</span>
				</div>
				<div class="problem-search-item-text">
					{{ item.postcontent | getword | long(120)  }}
				</div>
				<div class="problem-search-item-option">
					<span>{{ item.comment }}人回复</span>
					<span>{{ item.reading }}次浏览</span>
					<span @click="reply(item.id)">回复</span>
				</div>
			</div>

			<v-pagination v-if="total" :total="total" :display="limit" :currentPage="page" v-on:pagechange="togglePage"></v-pagination>
		</div>
	</main>

	<gotop-component></gotop-component>
	<footer-component></footer-component>
</div>

<script>
    var userAgent = navigator.userAgent.toLowerCase();
    var platform;
    if(userAgent == null || userAgent == ''){
        platform = 'WEB' ;
    }else{
        if(userAgent.indexOf("android") != -1 ){
            platform = 'ANDROID';
//            location.href = "";
        }else if(userAgent.indexOf("ios") != -1 || userAgent.indexOf("iphone") != -1 || userAgent.indexOf("ipad") != -1){
            platform = 'IOS';
//            location.href = "";
        }else if(userAgent.indexOf("windows phone") != -1 ){
            platform = 'WP';
//            location.href = "";
        }else{
            platform = 'WEB' ;
            location.href = "../../views/problem/problem.html";
        }
    }


    function getScrollTop(){
        var scrollTop=0;
        if(document.documentElement&&document.documentElement.scrollTop){
            scrollTop=document.documentElement.scrollTop;
        }else if(document.body){
            scrollTop=document.body.scrollTop;
        }
        return scrollTop;
    }
    $(window).scroll(function () {
        if(getScrollTop()>=100){
            $(".suspension").show();
        }
        else{
            $(".suspension").hide();
        }
    });
    function showTab(obj) {
        window.location.href = 'replay.html'
    }
    function to_top() {
        $(window).scrollTop(0);
    }


	new Vue({
		el:'#app',
		data:{
			list:[],
			limit:10,
			page:1,
			total:1,
			keyword:''
		},
		filters:{
			getword(strValue){
				if(strValue!= null && strValue!= ""){
					var reg = /[\u4e00-\u9fa5]/g;
					if (strValue.match(reg)){
						return strValue.match(reg).join("");
					} else{
						return strValue
					}
				}
				else{
					return "";
				}
			},
			long(str,number){
				if (str){
					return str.substring(0,number)
				} else{

				}
			}
		},
		mounted(){
			this.getlist();
		},
		methods:{
			getlist(keyword){
				axios.post(sysurl+'asking/askingList',{keywords:keyword}).then(res=>{
					this.list = res.data.data.data;
					this.total = res.data.data.total;
				})
			},
			togglePage(e){
				this.page = e;
				this.getlist(this.page)
			},
			reply(id){
				location.href = 'replay.html?id='+id
			},
			search(){
				this.getlist(this.keyword)
			}
		}
	})
</script>
</body>
</html>
